<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Basic Router Map</title>
<link href="css/map.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript" src="js/ArrayList.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/vehicle.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		cav = document.getElementById("canvas");
		cav.setAttribute('width', 1800);
		cav.setAttribute('height', 1800);
		ctx = cav.getContext('2d');
		vehicleTool = new Vehicle();
	});
	$(function() {
		var menuNode = $("<div id='menu' style='z-index:9999;'></div>");
		var wrapper = $("<div id='wrapper' style='height:" + COLUMN_NUM * 45 + "px;width:" + ROW_NUM * 45 + "px;'></div>");
		$("body").append(menuNode);
		$("body").append(wrapper);
		menu = new MenuController(menuNode, {
			tiles : TILES,
			principle : PRINCIPLE,
			model : 0
		});
		map = new MapEntity({
			row : ROW_NUM,
			col : COLUMN_NUM,
			parent : wrapper,
			menu : menu,
			height : 45,
			width : 45
		});
		/* 		$(function() {
		 setInterval(function() {
		 ajax_post("rs", "area=1", function(json) {
		 var rss = eval("(" + json + ")");
		 if (rss == null)
		 return;

		 });
		 }, 600);
		 }); */
		$(function() {
			setInterval(function() {
				ajax_post("vm", "area=1", function(json) {
					var vs = eval("(" + json + ")");
					if (vs == null)
						return;
					setInterval(function() {
						for ( var i = 0; i < vs.length; i++) {
							var cur = vs[i];
							if (vehicleTool.finishApart(cur.id, cur.current.x,
									cur.current.y, cur.next.x, cur.next.y)) {
								vehicleTool.record(cur.id, cur.current.x,
										cur.current.y, cur.next.x, cur.next.y);
								vehicleTool.moveCar(cur.current, cur.next,
										cur.id);
							}
						}
					}, 30);
				}, 600);
			});
		});
	});
</script>
</head>
<body>
	<div id="frame">
		<canvas id="canvas"
			style="width: 1800px; height: 1800px; position: absolute; z-index: 100; top: 8px; left: 8px;">
		</canvas>
	</div>
</body>
</html>